<template>
	<view class="page">
		<view class="img-view">
			<image :src="imgUrl"></image>
		</view>
		<view class="homewrapper">
			<view class="userInfo">
				<view class="avatar">
					<image :src="basicInfo.avatar" mode=""></image>
				</view>
				<view class="topInfo flex-center-around">
					<view class="item">
						<view class="value">{{userInfo.zan}}</view>
						<view class="title">点赞</view>
					</view>
					<view class="item"> <navigator url="/pages/mine/fans" hover-class="">
						<view class="value">{{userInfo.fans}}</view>
						<view class="title">粉丝</view></navigator>
					</view>
					<view class="item"> <navigator url="/pages/mine/focus" hover-class="">
						<view class="value">{{userInfo.focus}}</view>
						<view class="title">关注</view></navigator>
					</view>
				</view>
			</view>
			<view class="namearea">
				<view class="namesex">
					<text class="name">{{basicInfo.nickname}}</text>
					<image class="sex" src="../../static/imgs/user/yhzy_xb@2x.png" v-if="basicInfo.gender == '女'"></image>
					<image class="sex" src="../../static/imgs/user/yhzy_xb_m@2x.png"  v-if="basicInfo.gender == '男'" mode=""></image>
				</view>
				<view class="qianming">
					{{basicInfo.qianming}}
				</view>
				<view class="guanzhu">
					<image src="../../static/imgs/user/yhzy_gz@2x.png" v-if="basicInfo.nickname == 'spanky'"></image>
				</view>
			</view>
			<view class="zpList">
				<div class="zpItem" v-for="(item, index) in activities" :key="index">
					<view class="tag flex-center">
						<image :src="item.sjAvatar" mode=""></image>
						<text>#{{item.tag}}</text>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="date">{{item.date}}</view>
					<view class="videoImg">
						<image class="shipin" :src="'../../static/test/' + (6 + index) + '.png'">
							<view class="video-cover" @click="showVideos">
								<view class="video-cover-play-button"></view>
								<text class="video-cover-duration">06:07</text>
							</view>
					</view>
					<view class="bottomMenu">
						<view class="right">
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zan@2x.png">{{item.dianzan}}
							</view>
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_pl@2x.png">{{item.pinglun}}
							</view>
							<view class="flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zf@2x.png">
							</view>
						</view>
						<view class="bfs">{{item.bofang}}人围观</view>
					</view>
				</div>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basicInfo: {
					avatar: '../../static/imgs/index/sy_wd@2x.png',
					nickname: 'spanky',
					qianming: '我就是我。',
					gender: '男'
				},
				imgUrl: '/static/test/sj.png',
				userInfo: {zan: '1.1万', fans: '50', focus: '2'},
				activities: [
					{
						tag: '舞蹈vlog',
						sjAvatar: '../../static/test/a3.jpg',
						title: '太棒了，我一定去',
						src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
						date: '2020-4-23',
						bofang: '55w',
						dianzan: '23w',
						pinglun: 1000
					},
					{
						tag: '舞蹈vlog',
						sjAvatar: '../../static/test/a3.jpg',
						title: '太棒了，我一定去',
						src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
						date: '2020-4-23',
						bofang: '55w',
						dianzan: '23w',
						pinglun: 1000
					}
				]
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>

	.img-view image {
		width: 750rpx;
    height: 900rpx;
    filter: blur(1px) brightness(0.5);
	}
	.page-section-title{
		margin-top: 50rpx;
	}
	
	.homewrapper {
		position: relative;
		width: 100%;
		background: #fff;
		.userInfo {
			position: absolute;
			top: -20px;
			border-radius: 15px;
			background: #fff;
			box-sizing: content-box;
      width: 100%;
      height: 30px;
			.avatar {
				width: 60px;
				height: 60px;
				position: absolute;
				top: -30px;
				left: 10%;
				image {
					border: 2px solid #fff;
					height: 100%;
					border-radius: 50%;
				}
			}
			.topInfo {
				width: 50%;
				position: absolute;
				right: 0;
				top: 15px;
				.item {
					flex: 1;
					text-align: center;
					.value {
						font-size: 14px;
					}
					.title {
						font-size: 12px;
						color: #888888;
					}
				}
			}
		}
		.namearea {
			border-bottom: 1px solid #cecece;
			overflow: hidden;
			.namesex {
				margin: 60px 10pt 10px;
				.name {
					font-size: 22px;
					margin-right: 5px;
				}
				.sex {
					width: 18px;
					height: 18px;
				}
			}
			.qianming {
				margin: 10pt;
			}
			.guanzhu {
				position: absolute;
				right: 10pt;
				top: 70px;
				image {
					width: 28px;
					height: 28px;
				}
			}
		}
	}
	.zpList {
		padding: 10pt;
	
		.zpItem {
			margin-bottom: 15pt;
			position: relative;
			// border-radius: 10px;
			.shipin {
				width: 100%;
				height: 380rpx;
			}
			.date {
				position: absolute;
				color: #b9b9b9;
				font-size: 12px;
				text-indent: 20px;
				right: 0;
				top: 0;
			}
			.tag {
				image {
					width: 24px;
					height: 24px;
					margin-right: 5px;
				}
				font-size: 14px;
				color: #FF3333;
			}
			.title {
				font-size: 14px;
			}
			.video {
				width: 100%;
				height: 380rpx;
				// border-radius: 10px;
				z-index: 1;
	
				video {
					object-fit: cover !important;
					// border-radius: 10px;
				}
	
				&.hidden {
					/deep/ .uni-video-container {
						width: 100%;
						height: 380rpx;
					}
	
					video {
						display: none;
					}
				}
			}
	
			.videoImg {
				position: relative;
				width: 100%;
				height: 380rpx;
				border-radius: 10px;
	
				.shipin {
					border-radius: 10px;
				}
			}
	
			.bottomMenu {
				display: flex;
				height: 40px;
				align-items: center;
				position: relative;
				justify-content: space-between;
				border-bottom: 1px solid #cfcfcf;
	
				.bfs {	
					color: #b9b9b9;
					font-size: 12px;
					text-indent: 20px;
				}
	
				.right {
					display: flex;
	
					.r1 {
						margin-right: 12px;
						font-size: 12px;
						color: #929292;
					}
	
					.icon {
						width: 14px;
						height: 14px;
						margin-right: 3px;
					}
				}
			}
		}
	}
</style>
